<template>
  <div style="padding:15px;  background: #fff; box-shadow: 0 0 3px #ccc;" class="userM">
    <div>
      <el-input placeholder="请输入搜索内容" style="width: 20%" class="user" v-model="queryForm.keyword"></el-input>
      <el-button type="primary" class="search" @click="getLoginUser">查 询</el-button>
    </div>
    
    <el-button type="primary"  v-if="hasRole('user:setting:add')" class="buttonAdd button_add_zl" @click="addUser">
    	<i class="fa fa-plus" aria-hidden="true"></i>&nbsp;新增
    </el-button>
    <wh-table  :tableData="tableData" :tableLoading="tableLoading" :tableHeader="tableHeader" :option="option">
      <template slot-scope="props" slot="operate">
        <div >
        	<span class="caozuo_span">
          	<a  href="javascript:void(0);"  v-if="hasRole('user:setting:edit')"   @click="editUser(props.rowData)" style="cursor: pointer">编辑</a>
        	</span>
        	<span class="caozuo_span">
          	<a  href="javascript:void(0);"  v-if="hasRole('user:setting:delete')"  @click="changePw(props.rowData)" style="cursor: pointer">密码</a>
        	</span>
        	<span class="caozuo_span">
          	<a  href="javascript:void(0);"  @click="printGz(props.rowData)" style="cursor: pointer">打印</a>
        	</span>
        	<span class="caozuo_span">
          	<a  href="javascript:void(0);"  v-if="hasRole('user:setting:delete')"  @click="deleteUser(props.num,props.row,props.rowData)" style="cursor: pointer">删除</a>
        	</span>
        </div>
      </template>
    </wh-table>
    <edit-login :dataDetail="dataDetail" :type="operateType" :existLogin="includeSelfUserData"></edit-login>
    <edit-pw :data="editPw"  ></edit-pw>
  </div>
</template>
<script>
  import whTable from "../../../components/wh-table/index";
  import editLogin from "./editLogin";
  import editPw from "./editPw";
  export default {
    name:'userManage',
    components: {whTable,editLogin,editPw},
    data(){
      return{
        tableData: [],
        tableHeader:[],
        tableLoading:true,
        dataDetail:{},
        operateType:"",
        option:{showOperate:false, headerCell: {background: 'rgb(214, 215, 216)', color: 'rgba(0, 0, 0, 0.8)'}},
        queryForm:{keyword:""},
        editPw:{},
        includeSelfUserData:[]
      }
    },
    mounted(){
      let self = this;
      self.$eventBus.$on("updateLogin",function () {
        self.getLoginUser();
      });
      self.getLoginUser();
    },
    methods:{

      printGz(rowData){
        let self = this;
        self.$http({
          url: "/autoMonitor/print",
          method: "post",
          params:{code:"姓名:"+rowData.userName,name:"工号:"+rowData.workNum}
        }).then(resp => {

        });
      },

      getLoginUser(){
        let self = this;
        self.tableLoading = true;
        self.queryForm.keyword = self.queryForm.keyword.trim();
        self.$http({
          url: "/autoMonitor/user/queryAllUserDetail",
          method: "post",
          params:self.queryForm
        }).then(resp => {
          if (resp.success) {
            self.tableLoading = false;
            self.tableHeader =  [{"columnName": "workNum", "coloumNameCn": "工号"},
              {"columnName": "userName", "coloumNameCn": "姓名"},
              {"columnName": "userAccount", "coloumNameCn": "用户名"},
              {"columnName": "deptName", "coloumNameCn": "部门"},
              {"columnName": "roleName", "coloumNameCn": "角色"}];
            self.tableData = resp.result;
            self.option.showOperate = true;
          }
        });
      },
      editUser(rowData){
        let self = this;
        let param = {userId:rowData.id};
        this.operateType = 'edit';
        self.$http({
          url: "/autoMonitor/getLoginByUserId",
          method: "post",
          params:param
        }).then(resp => {
          if (resp.success) {
            self.type = 'edit';
            let copyData = Object.assign({},rowData);
            copyData.userAccount = resp.result.userAccount;
            copyData.userId = resp.result.userId;
            copyData.id = resp.result.id;
            copyData.accountType = resp.result.accountType;
            copyData.workNum = rowData.workNum;
            let tableData = self.tableData.filter(item => item.userAccount!=resp.result.userAccount );
            self.includeSelfUserData = JSON.parse(JSON.stringify(tableData))
            self.dataDetail = Object.assign({},copyData);
          }else{
            self.$notify({
              title: '提示',
              message: "用户不存在！",
              type: 'error'
            });
          }
        });
      },

      changePw(row){
        this.editPw = Object.assign({},row);
      },

      addUser(){
        this.dataDetail = {
          workNum:"",
          userName:"",
          checkPass:"",
          deptId:"",
          roleId:"",
          userAccount:"",
          accountType:"",
          password:""
        };
        this.includeSelfUserData = JSON.parse(JSON.stringify(this.tableData));
        this.operateType = 'add';
      },

      deleteUser(num,row,rowData){
        let self = this;
        let param = {userId:rowData.id};
        self.$confirm('确定删除该人员信息？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self.$http({
            url: "/autoMonitor/user/deleteUser",
            method: "post",
            params: param,
          }).then(resp => {
            if (resp.success) {
              self.getLoginUser();
              self.$notify({
                title: '提示',
                message: "删除成功！",
                type: 'info'
              });
              return
            }
            self.$notify({
              title: '提示',
              message: "操作失败，请联系管理员！",
              type: 'error'
            });
          });
        }).catch(() => {
          this.$message.info("已取消")             
        });
      }
    }
  }
</script>
<style scoped>
  .userM .el-date-editor.el-input, .userM .el-date-editor.el-input__inner {
    width: auto;
  }
  .userM .buttonAdd{
    margin-top: 15px;
    font-size: 12px;
    border-radius: 13px;
  }
  .search.el-button--medium {
    padding: 5px 9px !important;
    background: #34bfc6;
    border-color: #34bfc6;    
    margin-left: 10px;
  }
.table_zl .el-table {
    max-height: 650px;
}
</style>
